<!doctype html>
<html ng-app>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="Scope1.css" />
    <script src="../framework/angular-1.3.0.14/angular.js"></script>
    <script src="Scope2.js"></script>
</head>

<body>
    <div ng-controller="EventController">
        Root scope
        <tt>MyEvent</tt>count: {{count}}
        <ul>
            <li ng-repeat="i in [1]" ng-controller="EventController">
                <button ng-click="$emit('MyEvent')">
                    $emit('MyEvent')
                </button>
                <button ng-click="$broadcast('MyEvent')">
                    $broadcast('MyEvent')
                </button>
                <br>Middle scope
                <tt>MyEvent</tt>count: {{count}}
                <ul>
                    <li ng-repeat="item in [1, 2]" ng-controller="EventController">
                        Leaf scope
                        <tt>MyEvent</tt>count: {{count}}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>
